<div class="page-header">
    <h1>
        Daftar Harga Produk
        <small>
            <i class="icon-double-angle-right"></i>
            Daftar Harga Produk
        </small>
    </h1>
</div>



    <div class="row">
        <div class="col-xs-11">
                <table id="grid-table"></table>

                <div id="grid-pager"></div>
                <br>
                
                <script type="text/javascript">
                        var $path_base = "/";//this will be used in gritter alerts containing images
                </script>

       
    </div>
</div>
<script>
    


    jQuery(function($) {

            jQuery('#grid-table').jqGrid({
                url:'<?php echo $this->url() ?>/../../jsondata/infoproductprice',
                datatype: "json",
                height: 250,
                <?php
                if ($this->isAgent != ""){
                ?>
                colNames:['Kode Produk','Nama Produk','Harga Agen', 'Harga Mitra'],
                <?php
                }else{
                ?>
                colNames:['Kode Produk','Nama Produk','Harga Mitra'],
                <?php
                }
                ?>
                colModel:[
                    {name:'kodeProduk',index:'product_code'},
                    {name:'namaProduk',index:'product_name'},
                    <?php
                    if ($this->isAgent != ""){
                    ?>
                    {name:'hargaAgen',index:'agent_price', formatter:'number', align:'right'},
                    <?php
                    }
                    ?>
                    {name:'hargaMember',index:'member_price', formatter:'number', align:'right'}
                ],
                rowNum:10,
                rowList:[10,20,30],
                pager: '#grid-pager',
                rownumbers: true,
                viewrecords: true,
                multiboxonly: true,
                caption:"Daftar Harga Produk",

                loadComplete : function() {
                        var table = this;
                        setTimeout(function(){
                                updateActionIcons(table);
                                updatePagerIcons(table);
                                enableTooltips(table);
                        }, 0);
                },

                autowidth: true
            });

            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',{edit:false,add:false,del:false});


            //navButtons
            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',
                    { 	//navbar options
                            search: true,
                            searchicon : 'ui-icon-search orange',
                            refresh: true,
                            refreshicon : 'ui-icon-refresh green'
                    }
            )




            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {

                    var replacement =
                    {
                            'ui-icon-search' : 'ui-icon-search orange',
                            'ui-icon-refresh' : 'ui-icon-refresh green'
                    };
                    $(table).find('.ui-pg-div span.ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })

            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                    var replacement =
                    {
                            'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                            'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                            'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                            'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                    };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
            }

            function enableTooltips(table) {
                    $('.navtable .ui-pg-button').tooltip({container:'body'});
                    $(table).find('.ui-pg-div').tooltip({container:'body'});
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

    });

    
    
</script>
